<template>
  <div>
    <van-nav-bar title="个人信息"
    :fixed=true
    left-arrow
     @click-left="onClickLeft"
    >
    </van-nav-bar>
    <div class="tou-warp">
      <div class="tou">
          <van-image
            v-tap="{methods:tou}"
            round
            width="2rem"
            height="2rem"
            :src="img"
          />
          <van-popup v-model="show">
            <p class="zao xuan">请选择</p>
            <van-uploader  capture="camera">
            <p class="zao">拍照</p>
            </van-uploader>
            <van-uploader multiple :after-read="afterRead"  >
            <p class="zao">从手机相册选择</p>
            </van-uploader>
          </van-popup>
        <h2>{{name}}</h2>
        <van-icon @click="bian"  name="edit" />
      </div>
      <div class="che">
        <p class="qing">
          <span>测评情况</span>
          <span>(近三个月)</span>
        </p>
        <ul>
          <li>
            <p>0</p>
            <span>测评数</span>
          </li>
          <li>
            <p>0%</p>
            <span>好评数</span>
          </li>
          <li>
            <p>0%</p>
            <span>逾期率</span>
          </li>
          <li>
            <p>0%</p>
            <span>违规率</span>
          </li>
        </ul>
      </div>
      <h2 class="xin">平台信息</h2>
    </div>
  </div>
</template>

<script>
  export default{
    name:'Message',
    data(){
      return{
        name:localStorage.name,
        show:false,
        // img:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2018939532,1617516463&fm=26&gp=0.jpg',
        img:localStorage.img

      }
    },
    methods:{
       onClickLeft() {
            this.$router.go(-1);
       },
       tou(){
         console.log('tou')
         this.show=true;
       },
       bian(){
         this.$router.push('/editor')
       },
       afterRead(file) {
         // 此时可以自行将文件上传至服务器
         console.log(file);
           this.show=false
         this.img = file.content
         localStorage.setItem('img',file.content)
       },
    }
  }
</script>

<style scoped="">
  .van-hairline--bottom{
    border-bottom:1px solid #e0e0e0 ;
  }
  .van-icon-arrow-left{
    color: #bfbfbf;
    font-size: 24px;
  }
  .van-nav-bar__title{
    font-size: 20px;
    font-weight: 600;
  }
  .tou-warp{
    padding: 0 0 0 20px;
  }
  .tou{
    height: 100px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #E0E0E0;
  }
  .tou h2{
    font-size: 20px;
    flex: 1;
    display: flex;
    margin-left: 20px;
  }
  .tou .van-icon-edit{
    font-size: 24px;
    margin-right: 20px;
  }
  .che{
    text-align: left;
    height: 160px;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #E0E0E0;
  }
  .qing{
    height: 30px;
    display: flex;
    align-items: center;
  }
  .che .qing span:nth-child(1){
    font-size: 20px;
    font-weight: 600;
  }
  .che .qing span:nth-child(2){
    font-size: 12px;
    color: #909090;
    margin-left: 10px;
  }
  .che ul{
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .che ul li{
    height: 50px;
    width: 80px;
    padding-left:6px ;
    border-left: 1px solid #888888;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top: 14px;
  }
  .che ul li p{
    font-size: 20px;
    color: #ffb400;
    line-height: 20px;
    margin-top: 6px;
  }
  .che li span{
    font-size: 12px;
    line-height:12px;
    color: #888888;
  }
  .xin{
    text-align: left;
  }
  .tou-warp >>>.van-overlay{
    background: rgba(0,0,0,.6);
  }
  .zao{
    text-align: left;
    margin-left: 20px;
    width: 300px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #111;
  }
  .xuan{
    font-size: 20px;
    color: #000000;
  }
</style>
